UT2. Auditoría Técnica SEO con Lenguaje Dinámico y HTML

Etiquetas HTML para SEO Técnico

Optimizar un documento HTML para SEO técnico requiere el uso adecuado de varias etiquetas y atributos. A continuación, te describo cada una de las principales etiquetas HTML para SEO técnico y las opciones recomendadas para maximizar la optimización:

  1. <title>
  1. <meta name="description">
  1. <meta name="robots">
  1. <link rel="canonical" href="URL">
  1. <meta charset="UTF-8">
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. <h1>, <h2>, <h3>, … <h6>
  1. <img src="URL" alt="descripción" title="título">
  1. <a href="URL" rel="atributo" title="texto">
  1. <strong> y <em>
  1. <meta name="keywords" content="palabras, clave">
  1. <meta property="og:*"> (Open Graph)
  1. <meta name="twitter:*">
  1. <meta http-equiv="Content-Security-Policy" content="policy">
  1. <html lang="es">
  1. <script type="application/ld+json"> (JSON-LD para datos estructurados)
  1. <meta name="author" content="nombre del autor">
  1. <footer>, <header>, <nav>, <aside>, <section>, <article>, <main>
  1. <base href="URL">
  1. <meta name="theme-color" content="#000000">
  1. <meta name="referrer" content="no-referrer">
  1. <meta http-equiv="refresh" content="time; URL">
  1. <link rel="alternate" hreflang="es" href="URL">
  1. <meta http-equiv="x-ua-compatible" content="IE=edge">
  1. <noscript>
  1. <meta property="article:*">
  1. <figure> y <figcaption>
  1. <data> y <time>
  1. <address>
  1. <input type="search" /> y <label>

Cada etiqueta y atributo bien configurado contribuye a una optimización SEO técnica sólida y ayuda a los motores de búsqueda a comprender el contenido y estructura de la página, mejorando la relevancia y visibilidad en los resultados de búsqueda.

Las etiquetas anteriores cubren la mayoría de las prácticas de SEO técnico. Sin embargo, existen algunas etiquetas y atributos adicionales menos comunes o específicos que pueden ser útiles para ciertos tipos de contenido y mejoras adicionales en SEO técnico.

Estas etiquetas y atributos adicionales complementan las prácticas de SEO técnico, sobre todo cuando se trata de mejorar la accesibilidad, la experiencia del usuario y la compatibilidad en sitios multilingües o con elementos multimedia complejos. Implementarlos depende del tipo de contenido y de las necesidades específicas de la página web.

pip install seo-analyzer

Uso básico de seo-analyzerEl seo-analyzer puede analizar tanto sitios web completos como archivos HTML individuales para identificar problemas de SEO técnico, como la falta de etiquetas importantes, el rendimiento, y los enlaces rotos.

Práctica: Optimización SEO Técnica de una Página HTML

Objetivo

El objetivo de esta práctica es que los estudiantes aprendan a aplicar las mejores prácticas de SEO técnico utilizando etiquetas HTML apropiadas y, posteriormente, analizar la página utilizando una herramienta en Python para detectar mejoras y errores.

Parte 1: Creación de la página HTML

Paso 1: Crear la estructura básica de la página

Crea un archivo HTML llamado index.html con la siguiente estructura básica:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Guía completa sobre cómo aplicar SEO técnico a una página web">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.miweb.com/seo-tecnico">
    <title>SEO Técnico - Mejora la visibilidad de tu web</title>
</head>
<body>
    <header>
        <h1>Guía SEO Técnico</h1>
        <nav>
            <ul>
                <li><a href="#optimizacion-html">Optimización de HTML</a></li>
                <li><a href="#velocidad-carga">Mejorar la Velocidad de Carga</a></li>
                <li><a href="#moviles">Optimización para Móviles</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="optimizacion-html">
            <h2>Optimización de HTML</h2>
            <p>El SEO técnico se centra en el código de la página, la estructura del contenido, y cómo los motores de búsqueda la entienden.</p>
        </section>

        <section id="velocidad-carga">
            <h2>Mejorar la Velocidad de Carga</h2>
            <p>La velocidad de carga es crucial para el SEO. Optimiza imágenes, minimiza archivos CSS y JavaScript, y utiliza almacenamiento en caché.</p>
            <img src="velocidad.png" alt="Icono de velocidad de carga optimizada">
        </section>

        <section id="moviles">
            <h2>Optimización para Móviles</h2>
            <p>Los sitios deben ser responsivos y adaptarse a diferentes tamaños de pantalla para mejorar el SEO.</p>
        </section>
    </main>

    <footer>
        <p>© 2024 Guía SEO Técnico - Mejora la visibilidad de tu web</p>
    </footer>
</body>
</html>

Explicación del HTML optimizado para SEO técnico:

Análisis de la página HTML

  1. Declaración básica del documento
  1. Idioma de la página
  1. Meta etiquetas principales
  1. Etiqueta <title>
  1. Encabezados estructurados
  1. Enlaces de navegación
  1. Imágenes
  1. Contenido estructurado
  1. Metadatos para redes sociales

Recomendaciones para mejorar la optimización SEO técnico

Para optimizar aún más esta página HTML, considera agregar lo siguiente:

  1. Datos estructurados (JSON-LD) : Puedes añadir un script JSON-LD para especificar que es una guía o un artículo. Esto mejora cómo se muestra el contenido en los resultados de búsqueda.

  2. Metadatos para redes sociales (Open Graph y Twitter Cards) : Agregar etiquetas Open Graph (og:*) y Twitter Cards para mejorar la presentación al compartir el enlace en redes sociales.

  3. Atributo lang en <html>

  1. Sitemap y Robots.txt : Asegúrate de tener un robots.txt y un sitemap.xml bien configurados en tu servidor para guiar a los bots.

Ejemplo de optimización adicional para la página

<!-- Datos estructurados JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Guía SEO Técnico",
  "description": "Guía completa sobre cómo aplicar SEO técnico a una página web",
  "url": "https://www.miweb.com/seo-tecnico",
  "inLanguage": "es"
}
</script>

<!-- Open Graph Metadata -->
<meta property="og:type" content="website">
<meta property="og:title" content="SEO Técnico - Mejora la visibilidad de tu web">
<meta property="og:description" content="Guía completa sobre cómo aplicar SEO técnico a una página web">
<meta property="og:image" content="https://www.miweb.com/img/seo.jpg">
<meta property="og:url" content="https://www.miweb.com/seo-tecnico">

<!-- Twitter Cards Metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO Técnico - Mejora la visibilidad de tu web">
<meta name="twitter:description" content="Guía completa sobre cómo aplicar SEO técnico a una página web">
<meta name="twitter:image" content="https://www.miweb.com/img/seo.jpg">

Ficheros robots.txt y sitemap.xml:

En la optimización SEO, los archivos robots.txt y sitemap.xml son dos elementos esenciales que ayudan a los motores de búsqueda a rastrear y comprender mejor el contenido de un sitio web. Vamos a detallar cada uno de ellos:

Su principal función es proporcionar instrucciones a los robots de los motores de búsqueda sobre qué páginas o secciones del sitio web deben rastrear y cuáles no.

Esto permite tener control sobre el contenido que se desea indexar y el que no es relevante para el SEO.

Sintaxis del archivo robots.txtEl robots.txt está compuesto por reglas que los robots interpretan en una estructura sencilla. Los elementos clave son:

Ejemplo de archivo robots.txt

User-agent: *
Disallow: /admin/        # Prohíbe el acceso a la carpeta de administración
Disallow: /login/        # Prohíbe el acceso a la página de inicio de sesión
Allow: /public/allowed-file.html  # Permite el rastreo de un archivo específico
Sitemap: https://tu-dominio.com/sitemap.xml  # Ubicación del archivo sitemap.xml

Consideraciones SEO para robots.txt

  1. Archivo sitemap.xmlEl archivo sitemap.xml es un archivo en formato XML que lista todas las páginas importantes de un sitio web que se desean rastrear y, eventualmente, indexar. Este archivo es una especie de “mapa” para los motores de búsqueda, ayudándoles a comprender la estructura del sitio y encontrar nuevas páginas de manera rápida.Estructura del archivo sitemap.xmlEl archivo sitemap.xml tiene una estructura jerárquica, donde cada URL que se quiera indexar se coloca en una entrada <url>. Los elementos importantes en un sitemap.xml son:

Ejemplo de archivo sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://tu-dominio.com/</loc>
      <lastmod>2024-10-30</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://tu-dominio.com/blog</loc>
      <lastmod>2024-10-29</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
   <url>
      <loc>https://tu-dominio.com/contacto</loc>
      <lastmod>2024-10-15</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.5</priority>
   </url>
</urlset>

Consideraciones SEO para sitemap.xml

Relación entre robots.txt y sitemap.xmlAmbos archivos se complementan. Mientras el robots.txt limita el acceso a ciertas áreas del sitio, el sitemap.xml indica qué contenido debe ser rastreado. Una configuración adecuada ayuda a los motores de búsqueda a indexar el contenido relevante de manera eficiente y a no desperdiciar recursos en contenido innecesario.

Ejemplo completo

Ejemplo completo de una página index.html optimizada para SEO técnico, junto con un ejemplo de robots.txt y sitemap.xml.

robots.txt

<!DOCTYPE html>
<html lang="es">
<head>
    <!-- Meta Datos Básicos -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Optimización SEO en Ejemplo Completo</title>
    <meta name="description" content="Guía completa de optimización SEO técnico en HTML. Aprende a usar etiquetas clave para mejorar tu SEO.">
    <meta name="robots" content="index, follow">
    <meta name="keywords" content="SEO técnico, etiquetas HTML, optimización SEO, HTML5">
    <meta name="author" content="Tu Nombre">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://www.tusitio.com/">
    
    <!-- Open Graph Metadata -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Optimización SEO en Ejemplo Completo">
    <meta property="og:description" content="Guía completa de optimización SEO técnico en HTML.">
    <meta property="og:image" content="https://www.tusitio.com/img/seo.jpg">
    <meta property="og:url" content="https://www.tusitio.com/">
    
    <!-- Twitter Cards Metadata -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Optimización SEO en Ejemplo Completo">
    <meta name="twitter:description" content="Guía completa de optimización SEO técnico en HTML.">
    <meta name="twitter:image" content="https://www.tusitio.com/img/seo.jpg">
    
    <!-- Estilos -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- Datos Estructurados con JSON-LD -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "Optimización SEO en Ejemplo Completo",
        "url": "https://www.tusitio.com/",
        "image": "https://www.tusitio.com/img/seo.jpg",
        "description": "Guía completa de optimización SEO técnico en HTML. Aprende a usar etiquetas clave para mejorar tu SEO."
    }
    </script>
</head>
<body>

    <!-- Encabezado Principal -->
    <header>
        <h1>Guía Completa de Optimización SEO en HTML</h1>
    </header>

    <!-- Navegación -->
    <nav>
        <ul>
            <li><a href="#seccion1" title="Ir a la Sección 1">Sección 1</a></li>
            <li><a href="#seccion2" title="Ir a la Sección 2">Sección 2</a></li>
            <li><a href="#seccion3" title="Ir a la Sección 3">Sección 3</a></li>
        </ul>
    </nav>

    <!-- Contenido Principal -->
    <main>
        <section id="seccion1">
            <h2>Sección 1: Importancia de las Etiquetas HTML en SEO</h2>
            <p>Las etiquetas HTML ayudan a mejorar la estructura y el rendimiento SEO de una página web.</p>
        </section>

        <section id="seccion2">
            <h2>Sección 2: Open Graph y Twitter Cards</h2>
            <figure>
                <img src="https://www.tusitio.com/img/seo.jpg" alt="Optimización SEO" title="Imagen de Optimización SEO">
                <figcaption>Ejemplo de imagen optimizada para SEO.</figcaption>
            </figure>
        </section>

        <section id="seccion3">
            <h2>Sección 3: Robots y Sitemap</h2>
            <p>Con un archivo `robots.txt` y `sitemap.xml`, se puede controlar el rastreo e indexación del sitio.</p>
        </section>
    </main>

    <!-- Pie de Página -->
    <footer>
        <address>
            Contacto: <a href="mailto:contacto@tusitio.com">contacto@tusitio.com</a>
        </address>
    </footer>

    <!-- Script Externo -->
    <script src="js/scripts.js"></script>

</body>
</html>

robots.txt: El archivo robots.txt estará ubicado en la raíz del sitio (https://www.tusitio.com/robots.txt) y contendrá instrucciones para los bots de los motores de búsqueda.

User-agent: *
Disallow: /admin/
Disallow: /private/
Allow: /public/
Crawl-delay: 5

# Excluir específicamente a Googlebot de una sección
User-agent: Googlebot
Disallow: /no-google/

# Enlace al sitemap
Sitemap: https://www.tusitio.com/sitemap.xml

sitemap.xml:

El archivo sitemap.xml también estará en la raíz del sitio (https://www.tusitio.com/sitemap.xml) y tendrá la lista de URLs que deseas que los motores de búsqueda rastreen e indexen.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.tusitio.com/</loc>
      <lastmod>2024-10-30</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://www.tusitio.com/seccion1</loc>
      <lastmod>2024-10-29</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
   </url>
   <url>
      <loc>https://www.tusitio.com/seccion2</loc>
      <lastmod>2024-10-29</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.7</priority>
   </url>
   <url>
      <loc>https://www.tusitio.com/seccion3</loc>
      <lastmod>2024-10-29</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.6</priority>
   </url>
</urlset>

Explicación de cada componente:

Este conjunto proporciona una base optimizada para SEO técnico que debería ser eficaz en la mayoría de los escenarios.

ejemplo básico de cómo implementar un bloque de datos estructurados en formato JSON-LD, que ayuda a los motores de búsqueda a comprender mejor el contenido de tu página web. Este ejemplo es para un tipo de contenido común, como un negocio local.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Nombre del Negocio",
  "image": "https://ejemplo.com/logo.jpg",
  "url": "https://ejemplo.com",
  "telephone": "+34 123 456 789",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Calle Ejemplo, 123",
    "addressLocality": "Ciudad",
    "addressRegion": "Provincia",
    "postalCode": "28001",
    "addressCountry": "ES"
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday"
      ],
      "opens": "09:00",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday",
      "opens": "10:00",
      "closes": "14:00"
    }
  ],
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 40.416775,
    "longitude": -3.703790
  },
  "sameAs": [
    "https://www.facebook.com/negocio",
    "https://www.instagram.com/negocio",
    "https://twitter.com/negocio"
  ]
}
</script>

Explicación de cada elemento:

Este formato permite que motores de búsqueda como Google comprendan mejor la estructura de la página, lo que puede mejorar su visibilidad y presentación en los resultados de búsqueda.